degrassifandomcom-20200223-history
User blog:Voltorb/How to customize signatures using wikitext
For those of you who are very amateur at using wikitext, which I was until reading this article, I would like for you to read this. It will help you create a more advanced signature using wikitext: Reference * Many of these snippets use common HTML elements, the most common of which is . Visit the HTML section at w3schools.com:HTML reference. * Much of the flashy, custom effects are done using CSS. For a complete CSS reference, vist the CSS section at w3schools.com:CSS reference Basics Almost all signatures are made using the HTML element using the attribute "style". The style attribute has a number of CSS properties which combine together to produce a wide variety of possible signature forms. Many signatures use two or more tags nested within each other: one to produce the box within which the links are contained, and one or more to change the style of the links contained within the box. The basic format used in the element is: CSS Properties Font colour Property: color You can use this property to specify a colour name as follows: The same result can also be achieved much simpler with as follows: Colour names are limited to a list of recognised colour names which can be found here, however hexadecimal codes can also be input to yield any colour: Font Size Property: font-size This property can be used with words like "large" or "x-small": More control can be used by substituting a percentage for the size: Pixel sizes may also be substituted: Underline and Strikethrough Property: text-decoration Underline and strikethrough both use the same CSS property, but can still be used at the same time Underlining and striking can be achieved much simpler using and respectively. Font face Property: font-family You can specify more than one font with this property, separated by commas. The first one listed is used by default, but if a user, when viewing your signature, does not have the first font installed, it will display the second font for them. Generic font styles can also be input, such as "Serif", which have "flares" at the end of the letters, "Sans-serif", which does not have them, and "Monotype", fonts wherein all letters are the same width. Subscript and Superscript Unlike other formatting code used so far, superscript and subscript does not use the tag, but instead uses separate tags: and respectively. These must appear outside the tag, as shown below: Background colour Property: background-colour The easiest way to use this property is to specify a colour name, however hexidecimal codes will also work: Borders Property: border There are many different types of borders. The most basic border format is: Extra space can be put between the start and end of the border and the start and end of the text by putting non-breaking spaces before and after the text. Just like in font colour and background colour, the colour can be a recognised colour name, found here, or a hexidecimal code. The "1px" value can be changed to alter the thickness of the border, and the "solid" variable can be changed to any number of border styles: Multiple border styles The above syntax applies styles to all 4 borders at once. To apply styles to a borders one by one, use the following properties: *border-bottom *border-left *border-right *border-top Rounded corners Property: The "1em" measurement can be changed to any value between 0em and 1em. 1em is produces a quarter-circle corner which takes up half of the shorter edge on either side of the box. .5 em produces a quarter circle corner which takes up one fourth of the shorter edge. Other values are also possible, and adjust the radius accordingly. Due to the rounded corners, it is often necessary to use before and after the text or specify a left and right padding to ensure its not covered by the border. The template lets you use rounded borders for most major browsers, and should be used instead of specifying specific CSS elements. It is also possible to set a different radius for each corner by specifying four different em values, one after the other. The order in which they are used is: top-left, top-right, bottom-right, bottom-left. When specifying individual corner radii, it is possible to use measurements larger than 1em, up to 2 em which is a quarter-circle which takes up an entire side. Images It is possible to add images to your signature by using the following However, images contained in signatures may not be higher than 35 pixels. Users can scale images to 35px high without distorting them by using the code: Additionally, you can add text that pops up when your mouse hovers over the image. Also, it is possible to make the picture link to a page other than that file's page, although when hovering over it, this will overrule the text in the previous note. External links Property: plainlinks By default, all external links have an arrow next to them to denote that they take anyone who clicks outside the Wiki's network of websites, like this: TeenNick. That arrow can be disabled using the plainlinks property. Unlike other CSS properties covered so far, this one is not part of the "style" attribute of the element, but is part of the "class" attribute. It is important to note that putting a semicolon after the plainlinks property will disable it. Other CSS properties must be applied using a separate tag around the link name: The most common type of external link used in signatures is a link to a high score page. Using the plainlinks property will work for this, however it is easier to use the template. Full instructions are on the template page, however basic usage is . An example follows: Putting a signature together *I never really understood this part so don't ask me, I'm pretty sure Highscores are irrelevant to this wiki anyway. As explained in the beginning, multiple styles can be combined in one tag by separating them with semicolons. The first step to creating a signature is to decide on a border and background. This is a step-by-step guide to creating a sample signature for educational purposes, and is by no means the only way to make one. Category:Blog posts